<template>
  <div id="myself"  class="fixed-bottom">
    <section class="mine-sec fixed-bottom">
        <div class="mine-sec-header">
            <div class="sec-header-pic">
                <img class="globalImg" src="../../../assets/images/pic01.png">
            </div>
            <div class="split20"></div>
            <div class="sec-header-name">{{msg}}</div>
        </div>
        <section class="sec-cont">
            <mu-list>
                <mu-list-item title="个人信息" @click="gotouserInfo">
                    <mu-avatar icon="person" slot="leftAvatar"/>
                    <mu-icon class="material-icons" value="keyboard_arrow_right" slot="right"/>
                </mu-list-item>
                <mu-divider/>
                <mu-list-item title="手机绑定" @click="open">
                    <mu-avatar icon="phone" slot="leftAvatar"/>
                    <mu-icon class="material-icons" value="keyboard_arrow_right" slot="right"/>
                </mu-list-item>
                <mu-divider/>
                <mu-list-item title="房间列表" @click="gotoRoomList">
                    <mu-avatar icon="folder" slot="leftAvatar"/>
                    <mu-icon class="material-icons" value="keyboard_arrow_right" slot="right"/>
                </mu-list-item>
                <mu-divider/>
                <mu-list-item title="关于我们" @click="gotoabout">
                    <mu-avatar icon="cloud" slot="leftAvatar"/>
                    <mu-icon class="material-icons" value="keyboard_arrow_right" slot="right"/>
                </mu-list-item>
                <mu-divider/>
                <mu-list-item title="信箱" @click="gotEmail">
                    <mu-avatar icon="cloud" slot="leftAvatar"/>
                    <mu-icon class="material-icons" value="keyboard_arrow_right" slot="right"/>
                </mu-list-item>
            </mu-list>
        </section>
    </section>
    <mu-dialog :open="dialog" title="绑定手机" @close="close">
        <mu-text-field hintText="电话号码" type="number" icon="phone"/>
        <mu-flat-button slot="actions" @click="close" primary label="取消"/>
        <mu-flat-button slot="actions" primary @click="close" label="确定"/>
    </mu-dialog>
  </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'
    export default {
        name: 'myself', //组件的名字
        data() {
            return { //数据
                msg: '管家信息',
                dialog: false
            }
        },
        methods: { //方法
            gotoRoomList() {
                this.$router.push({
                    path: '/hostroomlist'
                })
            },
            gotoabout() {
                this.$router.push({
                    path: '/about'
                })
            },
            gotouserInfo(){
                this.$router.push({
                    path: '/userinfo'
                })
            },
            gotEmail(){
                this.$router.push({
                    path:'./email'
                })
            },
            open () {
              this.dialog = true
            },
            close () {
              this.dialog = false
            }
        },
        computed: { //计算 用来引入vuex里面state

        },
        mounted: function() { //组件加载完成

        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件
        },
        components: {

        }

    }
</script>
<style scoped lang="scss">
    .fle {
        flex: 1;
    }
    
    .mine-sec-header {
        /*height:120px;*/
        background: #000;
        /*url(../../assets/images/pic01.png) no-repeat center;*/
        background-size: 100%;
        padding: 20px 0;
        /*display: flex;    */
        justify-content: center;
        /*定义项目在主轴的对齐方向*/
        align-items: center;
        /*定义项目在交叉轴的对齐方向*/
        .sec-header-pic {
            /*flex: 8;*/
            position: relative;
            text-align: center;
            img {
                border: 4px solid #eee;
            }
        }
        .sec-header-name {
            /*flex: 7;*/
            position: relative;
            text-align: center;
        }
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->